<template>
    <!-- 轮播图 -->
    <Carousel />
    <!-- 搜索 -->
    <Search />
    <!-- 医院列表 -->
    <el-row :gutter="20" v-loading="loading" element-loading-text="加载中...." :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50">
        <el-col :span="20">
            <level @getlevel="getlevel" />
            <region @getregion="getregion" />
            <!-- 已有医院数据 -->
            <div v-if="hospitalArr.length !== 0">
                <el-row :gutter="20">
                    <el-col v-for="(item, index) in hospitalArr" :key="index" :span="12">
                        <el-card shadow="hover" class="box-card" @click="tohospitaldetails(item.hoscode)">
                            <div class="left">
                                <h1>{{ item.hosname }}</h1>
                                <div class="info">
                                    <span class="level">{{ item.param.hostypeString }}</span>
                                    <span><el-icon>
                                            <Clock />
                                        </el-icon>每天{{ item.bookingRule.releaseTime }}放号</span>
                                </div>
                            </div>
                            <div class="right">
                                <img :src="`data:image/jpeg;base64,${item.logoData}`" alt="">
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                 <!--分页 -->
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                    :background="true" layout="prev,pager,next,jumper,->,sizes,total" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
            <el-empty v-else description="没有数据" />
        </el-col>
        <el-col :span="4">
            <tip />
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import Carousel from './compontes/carousel.vue'
import Search from './compontes/search.vue'
import level from './compontes/level.vue'
import region from './compontes/region.vue'
import tip from './compontes/tip.vue'
import type { Content, AllResData } from '@/api/home/type'
import { onMounted, ref } from 'vue';
import { reqHospital } from '@/api/home'
import { Clock } from '@element-plus/icons-vue'
//引入路由
import {useRouter} from 'vue-router'
//创建路由
const $router=useRouter()
const loading = ref(true)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
const pageNo = ref<number>(1)
const pageSize = ref<number>(10)
const hospitalArr = ref<Content>([])
const total = ref<number>(0)
const hostype = ref<string>('')
const districtCode = ref<string>('')
onMounted(() => {
    getHospitalInfo()
})
//获取医院数据
const getHospitalInfo = async () => {
    loading.value = true
    const res: AllResData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value)
    if (res.code === 200) {
        loading.value = false
        hospitalArr.value = res.data.content
        total.value = res.data.totalElements
    }
}
//子组件自定义事件
const getlevel = (hosType: string) => {
    hostype.value = hosType
    getHospitalInfo()
}
//子组件自定义事件
const getregion = (districtcode: string) => {
    districtCode.value = districtcode
    getHospitalInfo()
}
//每页条数发生变化
const handleSizeChange = () => {
    pageNo.value = 1
    getHospitalInfo()
}
//页码发生变化
const handleCurrentChange = () => {
    getHospitalInfo()
}
//路由跳转
const tohospitaldetails=(hoscode:string)=>{
localStorage.setItem("query",hoscode)
$router.push({
    path:'/hospitaldetails/register',
    query: { hoscode: hoscode }
})
}
</script>

<style lang="less" scoped>
:deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

:deep(.el-card) {
    margin-bottom: 20px;
}

:deep(.el-pagination) {
    margin-bottom: 20px;
}

.left {
    .info {
        color: #7f7f7f;
        margin-top: 20px;
        font-size: 14px;

        .level {
            margin-right: 130px;
        }
    }
}

.right {
    img {
        width: 50px;
        height: 50px;
    }
}
</style>